<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-image: url('https://img0.baidu.com/it/u=826363509,601224996&fm=253&fmt=auto?w=500&h=286'); /* 替换为你的背景图片地址 */
            background-size: cover;
            padding: 20px;
        }
        .register-container {
            background-color: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 8px;
            max-width: 400px;
            margin: auto;
        }
        input[type=text], input[type=password], input[type=tel], select {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        input[type=submit] {
            width: 100%;
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        input[type=submit].disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        label {
            margin-bottom: 5px;
            display: block;
        }
        .error {
            color: red;
            font-size: 0.8em;
        }
    </style>
</head>
<body>
<div class="register-container">
    <h2>用户注册</h2>
    <form id="registerForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>

        <label for="phone">手机号:</label>
        <input type="tel" id="phone" name="phone" required pattern="[0-9]{11}">

        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>

        <label for="gender">性别:</label>
        <select id="gender" name="gender">
            <option value="male">男</option>
            <option value="female">女</option>
        </select>

        <input type="submit" value="注册" class="disabled" id="registerButton">
    </form>
    <div id="errorPhone" class="error"></div>
</div>

<script>
    document.getElementById('registerForm').addEventListener('input', function() {
        var form = this;
        var isValid = form.checkValidity();
        document.getElementById('registerButton').disabled = !isValid;

        // 手机号格式校验
        var phoneInput = document.getElementById('phone');
        var errorPhone = document.getElementById('errorPhone');
        if (!phoneInput.checkValidity()) {
            errorPhone.textContent = '手机号格式不正确，应为11位数字';
            phoneInput.style.borderColor = 'red';
        } else if (phoneInput.value.indexOf(/[a-zA-Z]/) !== -1) {
            errorPhone.textContent = '手机号不能包含字母';
            phoneInput.style.borderColor = 'red';
        } else {
            errorPhone.textContent = '';
            phoneInput.style.borderColor = '#ccc';
        }
    });
</script>
</body>
</html>